import React, { useEffect, useState } from 'react'
import { Input, Button, Table, Cascader, Pagination } from "antd"
import { request, history } from 'umi'
import "./index.less"
const status: any = {
    1: "待审核",
    2: "进行中",
    3: "未开始",
    4: "已驳回",
    5: "已结束",
}
export default function index() {
    const [data, setData] = useState([])
    const [total, setTotal] = useState()
    const [pages, setPages] = useState({
        page: 1,
        pageSize: 10
    })
    const [activityName, setActivityName] = useState("")
    const [activityState, setActivityState] = useState("")
    const options: any = [
        {
            value: "0",
            label: "请选择"
        },
        {
            value: '1',
            label: '待审核',
        },
        {
            value: '2',
            label: '进行中',
        },
        {
            value: '3',
            label: '未开始',
        },
        {
            value: '4',
            label: '已驳回',
        },
        {
            value: '5',
            label: '已结束',
        },
    ]
    const columns: any = [
        {
            title: '活动名称',
            dataIndex: 'activityName',
        },
        {
            title: '活动状态',
            dataIndex: 'activityStatus',
        },
        {
            title: '抽奖活动时间',
            dataIndex: 'timeDate',
        },
        {
            title: '公开方式',
            dataIndex: 'isEveryoneExpose',
        },
        {
            title: '操作',
            render: (a: any, b: any, c: any) => {
                return (
                    <div>
                        <p style={{ color: "skyblue", cursor: "pointer" }} onClick={() => { setting(b) }}>设置白名单</p>
                    </div>
                )
            }
        },
    ]
    const getList = () => {
        request("/campus/campusweb/activity/pageConditionQueryActivityByCreatorId", {
            method: "post",
            data: {
                ...pages,
                page: pages.page,
                activityName,
                activityState,
            }
        }).then(res => {
            if (res.code == 200) {
                setTotal(res.data.total)
                res = res.data.rows.map((ele: any) => {
                    return {
                        activityName: ele.activityName,
                        activityStatus: status[ele.activityStatus],
                        timeDate: `${ele.startDate}~${ele.endDate}`,
                        isEveryoneExpose: '白名单用户',
                        key: ele.activityBasicId
                    }
                })
                setData(res)
            }
        })
    }
    const setting = (b: any) => {
        history.push({
            pathname: "/settingWhiteList",
            query: {
                b,
            }
        })
        console.log(b, "b")
    }
    const onChange = (e: any) => {
        setPages({
            ...pages,
            page: e
        })
    }
    const changeCas = (e: any) => {
        setActivityState(e[0])
    }
    const changeInp = (e: any) => {
        setActivityName(e.target.value)
    }
    const serch = () => {
        getList()
    }
    const res = () => {
        setActivityName("")
        // setActivityState("0")
    }
    useEffect(() => {
        getList()
    }, [pages, activityState])
    return (
        <div className='lotteryWhiteList'>
            <div className='lotteryWhiteList-Tit'>
                <h1>抽奖白名单</h1>
            </div>
            <div className='lotteryWhiteList-Item'>
                <div className='lotteryWhiteList-Item-left'>
                    <div>
                        <span>活动名称:</span>
                        <Input placeholder='请输入' value={activityName} onChange={changeInp} />
                    </div>
                    <div className='avtiveStatus'>
                        <span className='avtiveStatusSpan'>活动状态:</span>
                        <Cascader style={{ width: '70%' }} onChange={changeCas} options={options} placeholder="请选择" />
                    </div>
                </div>
                <div className='lotteryWhiteList-Item-right'>
                    <Button className='serch' onClick={serch}>搜索</Button>
                    <Button className='res' onClick={res}>重置</Button>
                </div>
            </div>
            <div className='lotteryWhiteList-Table'>
                <Table
                    dataSource={data}
                    columns={columns}
                    pagination={false}
                />
            </div>
            <div className='pages'>
                <span className='span'>共{total}条</span> <Pagination
                    style={{ position: "absolute", right: "0px" }}
                    showQuickJumper
                    defaultCurrent={1}
                    total={500}
                    onChange={onChange} />
            </div>
        </div>
    )
}
